<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    let option = {
        backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#c86589'
        },
            {
                offset: 1,
                color: '#06a7ff'
            }
        ], false),
        title: {
            text: "主营业务收入(万元)",
            left: "center",
            bottom: "5%",
            textStyle: {
                color: "#fff",
                fontSize: 16
            }
        },
        grid: {
            top: '20%',
            left: '10%',
            right: '10%',
            bottom: '15%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                <#list years as year>
                    '${year}',
                </#list>
            ],
            axisLabel: {
                margin: 30,
                color: '#ffffff63'
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                length: 25,
                lineStyle: {
                    color: "#ffffff1f"
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ffffff1f'
                }
            }
        },
        yAxis: [{
            type: 'value',
            position: 'right',
            axisLabel: {
                margin: 20,
                color: '#ffffff63'
            },

            axisTick: {
                show: true,
                length: 15,
                lineStyle: {
                    color: "#ffffff1f",
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ffffff1f'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            }
        }],
        series: [{
            name: '注册总量',
            type: 'line',
            smooth: true, //是否平滑曲线显示
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
                normal: {
                    color: "#fff", // 线条颜色
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#fff',
                }
            },
            itemStyle: {
                color: "red",
                borderColor: "#fff",
                borderWidth: 3
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#eb64fb'
                    },
                        {
                            offset: 1,
                            color: '#3fbbff0d'
                        }
                    ], false),
                }
            },
            data: [
                <#list datas as data>
                    ${data?c},
                </#list>
            ]
        }]
    };
    myChart.setOption(option);
</script>
